/* 
  目标： 使用Context来跨组价通信，让App组件-直接传数据给SonSon组件
  优缺点:
    优点：React自带，不需要借助其它包，即可跨组件通信, 减少代码体积

    缺点：Provider 和Consumer增加嵌套结构，代码理解成本加大。
*/

import React, { Component } from 'react';

// 1. 创建环境, 解构出两个组件
const { Provider, Consumer } = React.createContext();
const { Provider: Provider2, Consumer: Consumer2 } = React.createContext();

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>父组件</h1>
        {/*  2. 💥传递数据 : 使用Provider包住后代组件, 设置value属性,   */}
        <Provider value="hello React">
          <Son />
        </Provider>
      </div>
    );
  }
}

class Son extends Component {
  render() {
    return (
      <div>
        <h2> 儿子</h2>
        <Provider2 value="儿子发给重孙子的消息">
          <SonSon />
        </Provider2>
      </div>
    );
  }
}

class SonSon extends Component {
  render() {
    return (
      <>
        <div>
          <h2> 孙子</h2>
          {/*  3. 使用Consumer组件接收数据, 形参就是传来的数据 */}
          <Consumer>{(data) => <h1>{data}</h1>}</Consumer>
        </div>
        <SonSonSon></SonSonSon>
      </>
    );
  }
}

class SonSonSon extends React.Component {
  render() {
    return (
      <div>
        孙子的子组件
        <Consumer2>
          {(data) => {
            return <h3>{data}</h3>;
          }}
        </Consumer2>
      </div>
    );
  }
}
